<template>
	<view class="page page_body">
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子导航栏 -->
		<view class=""
			:style="{'height': hieght}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<text :slot="'left'">购物车</text>
		</navBar>
<!-- 编辑 -->
			<!-- #ifdef MP-WEIXIN -->
			<u-sticky offset-top="0">
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<u-sticky offset-top="-44">
					<!-- #endif -->
					<view class="bianji pd_lr10">
						<view class="mian_confirmOrder_address_l mr10" @click="toAddress">
							<image src="@/static/newpic/cartAddress.svg"></image>
						</view>
					<view class="mian_confirmOrder_address_c mr10" >
							<text v-if="computedAddress" @click="toAddress">
						       {{computedAddress}}
							</text>
							<text v-else>暂无收货地址</text>
					</view>
					<view @click="tapBianji"
						:style="{'color':switchShow ? '#ec4141' : '#333'}">
						{{switchShow ? '完成': '编辑' }}
					</view>
					</view>
				</u-sticky>
		<!-- 主体内容 -->
		<scroll-view class="shopping_main"
			scroll-y
			@scrolltolower="scrolltolower"
			:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}">
				<!-- 购物车列表 -->
				<view class="shoppingList pd10"
					v-if="shoppingList.length">
					<!-- 商品 -->
					<view class="shoppingList_item"
						v-for="(item,index) in shoppingList"
						:key="index">
						<view class="shoppingList_item_top">
							<view class="checkbox">
								<view class="custom_checkbox"
									:class="{active : item.spuChecked[0]}">
									<u-checkbox-group v-model="item.spuChecked"
										:disabled="item.children && item.children.length && item.children.every(a => a.status == 2) && !switchShow"
										@change="item.children && item.children.length && item.children.every(a => a.status == 2) && !switchShow ? '' : tapSpuCkeched($event,index)">
										<u-checkbox :name="true"></u-checkbox>
									</u-checkbox-group>
								</view>
							</view>
							<view class="item_img pd10"
								v-if="updateNoneImg"
							  	@click="item.status && item.status == 2 ? '' : toDetails(item)">
								<image style="width: 100%;height: 100%; border-radius: 12rpx;"
									mode="aspectFill"
									:src="item  && 
									item.spuInfo && 
									item.spuInfo.picture ? 
									uploadImgUrl + item.spuInfo.picture : computedMorentu"></image>
							</view>
							<view class="item_right ml5"  	@click="item.status && item.status == 2 ? '' : toDetails(item)">
								<view class="item_right_name texttowShow">
									{{item && item.spuInfo && item.spuInfo.name ? item.spuInfo.name : ''}}
								</view>
								<view class="item_right_unit">
									<!-- <view class="">
										共{{item.totalStockNum ? Utils.formatToFixed(item.totalStockNum,'number') : ''}}件
									</view> -->

								</view>

							</view>
						</view>
						<view v-for="(it,inx) in item.children"
							class="shoppingList_item_bom">
							<view style="width: 60rpx;"></view>
							<view class="shoppingList_item_bom_r mtb10">
								<view class="shoppingList_item_bom_r_t">
									<view class="shoppingList_item_bom_r_l">
										<view class="custom_checkbox"
											:class="{active : it.skuChecked[0]}">
											<u-checkbox-group v-model="it.skuChecked"
												:disabled="it.status == 2 && !switchShow"
												@change="it.status == 2 && !switchShow ? '' : tapSkuChecked($event,index,inx)">
												<!-- <checkbox @click="it.status == 2 && !switchShow ? '' : tapSkuChecked(index,inx)"
											:checked="it.skuChecked" 
											color="#ec4141" style="transform:scale(0.7);border-radius: 50%;"></checkbox> -->
												<u-checkbox :name="true"></u-checkbox>
											</u-checkbox-group>
										</view>
										<text
											class="price mr10">￥{{it.skuInfo && 
											it.skuInfo.priceTrackingInfo &&
											it.skuInfo.priceTrackingInfo.price ?
											Utils.formatToFixed(it.skuInfo.priceTrackingInfo.price,'price') : 
											it.price ? Utils.formatToFixed(it.price,'price') : 0}}</text>
										<text class="unit">{{
												it.skuInfo &&
											 	it.skuInfo.unitInfo && 
											 	it.skuInfo.unitInfo.name &&
											 	it.skuInfo.specsOptionInfo && 
											 	it.skuInfo.specsOptionInfo.length ? 
											 	it.skuInfo.specsOptionInfo.map(it=>it.optionName).join(' ') +
												' / ' +
												it.skuInfo.unitInfo.name :
											 	it.skuInfo.unitInfo.name
										 }}</text>
										<view v-if="it.status == 2"
											style="color:#ccc;font-size:24rpx;margin-left:10rpx;">已下架</view>
									</view>
									<view class="shoppingList_item_bom_r_r"
										style="width:200rpx;">
										<u-number-box>
											<view slot="minus"
												@click="delNum(it,inx,index)"
												class="minus"
												:style="{background:it.qty <= 1 ? 'rgba(255, 0, 0, 0.5)' : 'rgba(255, 0, 0, 1)'}">
												<u-icon name="minus"
													:class="{min : it.qty <= 1}"
													size="12"></u-icon>
											</view>
											<u-input border='none'
												style="width: 50px;text-align: center;"
												class="input"
												inputAlign='center'
												slot="input"
												type='number'
												v-model="it.qty"
												@input="onInput(it,inx,index)" @paste="onPaste"
												@blur='blurNum(it,inx,index)'>
											</u-input>
											<!-- <text slot="input"
												style="width: 50px;text-align: center;"
												class="input"></text> -->
											<view slot="plus"
												@click="addNum(it,inx,index)"
												class="plus">
												<u-icon name="plus"
													color="#FFFFFF"
													size="12"></u-icon>
											</view>
										</u-number-box>
									</view>
								</view>
								<view v-if="it.oldPrice > it.price"
									class="shoppingList_item_bom_r_b">
									比加入时降价{{ it.oldPrice > it.price ? Utils.formatToFixed(it.oldPrice - it.price,'price') : 0}}元
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="noShopping"
					v-if="shoppingList.length==0">

					<image style="width: 400rpx;height: 260rpx;"
						mode="aspectFill"
						:src="xcxImgUrl && xcxImgUrl+'shopping/kong_icon.svg'">
					</image>
					<text class="mt10">购物车无商品快去购买吧！！</text>
				</view>
				<!-- 为你推荐 -->
				<view class="foYouRecommend" style="margin: 20rpx 0;">
					<image style="width:100%;height: 42rpx;"
						mode="aspectFill"
						:src="xcxImgUrl && xcxImgUrl+'shopping/u248.svg'"></image>
				</view>

				<!-- 推荐商品列表 -->
				<view class="recommendShoppingList" style="padding:0 32rpx;box-sizing: border-box;">
					<!-- <view style="padding: 10rpx;"
						@click="toDetails(item)"
						v-for="(item,index) of commonityList"
						:key="index">
						<guessWhatYouLike @shuaxin='shuaxin'
							@publish="publish"
							:item="item"></guessWhatYouLike>
					</view> -->
					<view style="width:calc(50% - 10rpx)">
						<view 
						    style="padding: 10rpx 0;"
							v-for="(cnit,index) of commonityList"
						
							:key="index"
							v-if="index % 2 ===0">
							<guessWhatYouLike :item="cnit"  @shuaxin='shuaxin'
							@publish="publish"></guessWhatYouLike>
						</view>
					</view>
					<view  style="width:calc(50% - 10rpx)">
						<view
						 style="padding: 10rpx 0;"
							v-for="(cnit,index) of commonityList"
							
							:key="index"
							v-if="index % 2 !==0">
							<guessWhatYouLike :item="cnit"  @shuaxin='shuaxin'
							@publish="publish"></guessWhatYouLike>
						</view>
					</view>
				</view>

		</scroll-view>

		<!-- 合计结算 -->
		<view class="aggregateSettlement pd_left10">
			<view class="aggregateSettlement_checked custom_checkbox"
				style="display: flex;align-items: center;"
				:class="{active : AllChecked[0]}">
				<!-- <checkbox @click="tapAllChecked" :checked="AllChecked" color="#ec4141"
					style="transform:scale(0.7);border-radius: 50%;"></checkbox> -->
				<u-checkbox-group v-model="AllChecked"
					@change="tapAllChecked">
					<u-checkbox :name="true"></u-checkbox>全选
				</u-checkbox-group>

			</view>
			<view class="aggregateSettlement_right">
				<template v-if="!switchShow">
					<view class="aggregateSettlement_right_aggregate mr10">
						合计：
						<text>{{Utils.formatToFixed(computedTotalMoney,'money')}}</text>
					</view>
					<view @click="tapQujiesuan"
						class="aggregateSettlement_right_settlement">
						结算
					</view>
				</template>
				<view @click="delCommonity"
					style="background-color: black;"
					v-if="switchShow"
					class="aggregateSettlement_right_settlement">
					删除
				</view>
			</view>
		</view>

		<!-- 模态框确认 -->
		<u-modal :show="modalShow"
			:title="modalInfo.title"
			showConfirmButton
			showCancelButton
			@confirm='modalConfirm'
			@cancel='modalShow = false'
			:content='modalInfo.content'>

		</u-modal>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		listMobileCommodityPageInfo,
		listMallShoppingCartPageInfo,
		delMallShoppingCartCommodity,
		updateMallShoppingCartCommodityQty,
		getCatCount
	} from '@/api/global.js'
	import {getDefaultMallCustomerAddress} from '@/api/setting.js'
	import {
		uploadImgUrl
	} from '@/utils/request.js'
	export default {
		computed: {
			...mapGetters(['demoTopHieght']),
			//返回默认图
			computedMorentu() {
				return this.$store?.state?.morentu
			},
				computedAddress(){				
							let province = this.addressInfo?.province || ''
							let city = this.addressInfo?.city || ''
							let area = this.addressInfo?.area || ''
							let address = this.addressInfo?.address || '' 
							if(province == '' && city == '' && address == ''){
								return ''
							}else{
								if(address){
									address = address.replace(/\n/g,'')
								}
								return province + city + area + address
							}
						},
			//返回有图无图控制
			updateNoneImg() {
				return this.$store.state.configSetting.noneImge == 1 ? false : true
			},
			//计算总计
			computedTotalMoney: {
				get() {
					//先循环所有选中的spu
					let commonitySpuArr = this.shoppingList.filter(it => it.spuChecked[0] == true)
					let pirceArr = []
					//拿到所有的价格
					commonitySpuArr.forEach(item => {
						pirceArr.push(...item.children.filter(it => it.skuChecked[0] == true).map(it => it
							.money))
					})
					//累加计算
					return pirceArr.reduce((init, item) => {
						return init += this.Utils.formatToFixed(item, 'money') * 1;
					}, 0)
				},
				set(arr) {
					console.log(arr)
					this.shoppingList = arr;
				}
			}
		},
		data() {
			return {
				addressInfo:{},
				uploadImgUrl,
				statusBarHeight: '', //状态栏的高度
				hieght: '', //站位的高度
				shoppingList: [], //购物车列表
				commonityList: [], //商品列表
				pageData: {
					currentPage: 1,
					pageSize: 10
				},
				id: '',
				lastPage: 0,
				searchParams: {
					search: '',
					brandId: '', //商品品牌id
					tag: '', //猜你喜欢类型：[1.按商品销量  2.按商品上架时间  3.按商品点击量  4.自定义]
					objectType: '', //对象类型[1：商品id 2：商品品牌id 3：商品分类id]
					warehouseId: '', //仓库id[关联仓库表]
					// sort:1,
				},
				AllChecked: false, //全选状态
				switchShow: false, //false 编辑 true 完成
				modalShow: false, //模态框
				modalInfo: { //模态框提示对象内容
					title: '温馨提醒',
					content: ''
				}
			};
		},
		provide() {
			return {
				resetList: this.resetList
			}
		},
		onLoad(options) {
			
			//获取仓库id
			this.searchParams.warehouseId = this.$store.state.warehouseInfo.warehouseId
			// 赋值首页猜你喜欢 条件
			this.searchParams.tag = this.$store?.state?.cainixihuanSearchParams?.tag || ''
			this.searchParams.objectType = this.$store?.state?.cainixihuanSearchParams?.objectType || ''
			
			//获取猜你喜欢商品列表
			this.getCainixihuanList()
			console.log('options', options,11111111111111)
			if(options?.address){
				//切换地址
				this.addressInfo = JSON.parse(options?.address) 
			}else{
				//获取默认收货地址
				this.getAddress()
			}
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.hieght = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('shopping_main')
			})
			this.searchParams.warehouseId = this?.$store?.state?.warehouseInfo?.warehouseId || '';
			this.getCainixihuanList();
			//获取购物车列表
			this.getCardList()
			this.getCatToally()
			console.log('this.addressInfo', this.addressInfo)
			if(!this.addressInfo?.province || !this.addressInfo?.city){
				this.getAddress()
			}
		},
		onHide() {
			this.AllChecked = false
			this.addressInfo = ''
			this.getCatToally()
		},
		methods: {
			onPaste(e){
				console.log(e,'粘贴');
			},
			onInput(e,inx, index){
				console.log(e,'输入');
				  if (/[^\d]/g.test(e.qty)){
					 this.Utils.toast(`只能输入数字`)
					 setTimeout(() => {
						 e.qty = 1
						 this.updateCommonityQty(e, inx, index);
					 },300)
					 
				 }
			},
			// 购物车数量改变
			resetList(){
				this.pageData = {
					currentPage: 1,
					pageSize: 10
				},
				this.getCainixihuanList()
			},
				// 获取购物车数量
						async getCatToally(){
							const {data} = await getCatCount({
								type:1
							})
						    if(data.info > 0 ) {
								uni.setTabBarBadge({
								  index: 2,
								  text: data.info.toString() 
								})
							}else {
								uni.removeTabBarBadge({
								  index: 2
								})
							}
							
							
						},
			toAddress(){
				 console.log(1111111);
							uni.navigateTo({
								url:`/page_public/address?type=${this.type}`
							})
						},
			publish() {
				this.getCardList();
			},
			//获取默认地址
						async getAddress(){
							let res = await getDefaultMallCustomerAddress()
							if(res.code == 2000){
								this.addressInfo = res?.data?.info || {}
							}else{
								this.Utils.toast(`${res.msg}`)
							}
						},
			//去商品详情
			toDetails(item) {
				console.log(item);
				uni.navigateTo({
					url: `/page_public/commodityDetail?commodityId=${item.commodityId}`
				})
			},
			//去结算
			tapQujiesuan() {
				//先筛选有没有选择 没有选择 提示先选择
				// let arr = []
				// this.shoppingList.forEach(item => {
				// 	if(item.status ==2){
				// 		arr = item.children.filter(it => it.status !== 2 && it.skuChecked[0] == true)	
				// 	}
				// 	else if (item.status == 1 && item.spuChecked[0] == true){
				// 		arr = item
				// 	}
				// })
				console.log(this.shoppingList,'this.shoppingList');
				let arr = this.shoppingList.filter(item => item.status !== 2 || item.children.filter(it => it.status !== 2)).filter(it => it.spuChecked[0] == true)
				 console.log(arr,'商品',arr.length);
				if (!arr.length) {
					this.Utils.toast(`请先选择需要结算的商品`)
					return
				}
				//先把购物车商品添加vuex =在结算页面回显
				this.$store.commit('cardCommonity', arr)

				uni.navigateTo({
					url: `/page_public/confirmOrder?type=2&cartType=1&address=${JSON.stringify(this.addressInfo)}`
				})
			},
			//监听添加购物车 刷新购物车
			shuaxin() {
				console.log('执行');
				this.shoppingList = []
				this.getCardList()
			},
			//模态框确认事件
			async modalConfirm() {
				//关闭模态框
				this.modalShow = false
				//删除商品id
				let commoditySkuArr = []
				// 拿到筛选的商品spu
				if (this.modalInfo.content === '当前数量只剩1件商品了，再减将会删除此商品，是否继续？？？') {
					commoditySkuArr = [this.id]

				} else {
					let commoditySpuArr = this.shoppingList.filter(it => it.spuChecked[0] == true)
					console.log(commoditySpuArr);

					//拿到筛选商品的spu中sku
					commoditySpuArr.forEach(item => {
						commoditySkuArr.push(...item.children.filter(it => it.skuChecked[0] == true).map(it =>
							it
							.commodityDetailId))
					})
					console.log(commoditySkuArr);

				}
				let res = await delMallShoppingCartCommodity({
					type: 1, //类型[1：普通购物车 2：商品满减购物车 3：商品满赠购物车]
					commodityDetailIds: commoditySkuArr
				})
				if (res.code == 2000) {
					this.Utils.toast('删除成功')
					this.getCatToally()
					this.getCainixihuanList()
					this.shoppingList = []
					this.getCardList()
					this.AllChecked = [false]
				

				} else {
					this.Utils.toast(`${res.msg}`)
				}
              
			},
			//点击删除
			delCommonity() {
				let checkedArr = this.shoppingList.filter(it => it.spuChecked[0] == true)
				if (checkedArr.length <= 0) {
					this.Utils.toast(`请先选择商品`)
					return
				}
				this.modalShow = true
				this.modalInfo.content = '是否确定将要从购物车中将选中的所有商品删除？？？'
			},
			//点击加号添加数量
			addNum(it, inx, index) {
				++it.qty
				this.updateCommonityQty(it, inx, index);
				

			},
			//点击减号减少数量
			delNum(it, inx, index) {
				console.log(it)
				if (it.qty <= 1) {
					it.qty = 1
					this.modalShow = true
					this.modalInfo.content = '当前数量只剩1件商品了，再减将会删除此商品，是否继续？？？'
					this.id = it.commodityDetailId
				
				} else {
					--it.qty
					this.updateCommonityQty(it, inx, index);
					
				}
					
			

			},
			//修改商品数量接口
			async updateCommonityQty(item, inx, index) {
				let res = await updateMallShoppingCartCommodityQty({
					commodityDetailId: item.commodityDetailId || '', //商品SKUid
					qty: item.qty || 0,
					money: this.Utils.formatToFixed(item.qty * item.price, 'money') || 0,
					type: 1, //类型[1：普通购物车 2：商品满减购物车 3：商品满赠购物车]
				})
				if (res.code == 2000) {
					this.computedTotalMoney = this.shoppingList.map((v, i) => {
						if (i == index) {
							v.children[inx].qty = item.qty;
							v.children[inx].money = item.qty * item.price;
						}
						return v;
					})
					// this.getCardList();
					this.resetList()
				} else {
					this.Utils.toast(`${res.msg}`);
				}
				this.getCatToally()
			},
			//数量输入框失去焦点
			blurNum(it, inx, index) {
				if (it.qty * 1 > 10 ** 7) {
					it.qty = 10 ** 7;
				}
				it.qty = this.Utils.formatToFixed(it.qty * 1, 'number');
				console.log(it.qty)
				if (it.qty <= 1) {
					it.qty = 1
				}
				if (it.qty.toString().startsWith('0') && !it.qty.includes('.')) {
					it.qty = it.qty.slice(1, it.qty.length)
				}
				// it.qty = parseInt(it.qty)
				this.updateCommonityQty(it, inx, index)
				
				
			},
			//点击编辑
			tapBianji() {
				this.switchShow = !this.switchShow
				// this.shoppingList = this.shoppingList.map(v => {
				// 	v.spuChecked = [false];
				// 	if (v.children && v.children.length) {
				// 		v.children = v.children.map(a => {
				// 			a.skuChecked = [false];
				// 			return a;
				// 		})
				// 	}
				// 	return v
				// })
				//状态等于完成 取消全选状态
				if (!this.switchShow) {
					this.shoppingList = this.shoppingList.map(v => {
						v.spuChecked = [false];
						if (v.children && v.children.length) {
							v.children = v.children.map(a => {
								a.skuChecked = [false];
								return a;
							})
						}
						return v
					})
					this.AllChecked = [false]
				}
			},
			//点击勾选sku
			tapSkuChecked(e, spuIndex, skuIndex) {
				console.log(e)
				this.shoppingList[spuIndex].children[skuIndex].skuChecked = [e[0]]

				//sku勾上一个 spu就选中
				if (this.shoppingList[spuIndex].children.some(item => item.skuChecked[0] == true)) {
					this.shoppingList[spuIndex].spuChecked = [true]
				} else {
					this.shoppingList[spuIndex].spuChecked = [false]
				}

				//如果所有的spu都选中 全选也选中
				if (this.shoppingList.every(item => item.spuChecked[0] == true)) {
					this.AllChecked = [true]
				} else {
					this.AllChecked = [false]
				}

			},
			//点击勾选spu
			tapSpuCkeched(e, index) {
				//修改当前选择状态
				this.shoppingList[index].spuChecked = [e[0]]

				//子级全部勾选
				this.shoppingList[index].children.forEach(item => {
					if (item.status == 1 || this.switchShow) {
						item.skuChecked = [this.shoppingList[index].spuChecked[0]]
					}
				})

				//如果都选择 全选也选上
				if (this.shoppingList.every(item => item.spuChecked[0] == true)) {
					this.AllChecked = [true]
				} else {
					this.AllChecked = [false]
				}
			},
			//点击全选
			tapAllChecked(e) {
				this.AllChecked = e;
				//改变状态
				this.shoppingList.filter(item => item.status !== 2  || item.children.filter(it => it.status !== 2)).forEach(item => {
					item.spuChecked = e
					//子级
					item.children.forEach(it => {
						if (it.status == 1 || this.switchShow) {
							it.skuChecked = e
						}
					})
				})
			},
			//获取购物车列表
			async getCardList() {
				uni.showLoading()
				let res = await listMallShoppingCartPageInfo({
					type: 1, //类型[1：普通购物车 2：商品满减购物车 3：商品满赠购物车]
					warehouseId: this.$store?.state?.warehouseInfo?.warehouseId || '', //仓库
					sort: 1,
					currentPage: 1,
					pageSize: 10000
				})
				if (res.code == 2000) {
					uni.hideLoading()
					this.shoppingList = res?.data?.info?.list || []
					this.AllChecked = this.AllChecked[0] ? this.AllChecked : [false];
					//遍历列表 添加状态
					this.shoppingList = this.shoppingList && this.shoppingList.length ?
						this.shoppingList.map(item => {
							item.children = item.children && item.children.length ? item.children.map((it) => {
								return {
									...it,
									skuChecked: it.skuChecked && it.skuChecked[0] ? it.skuChecked : [false]
								}
							}) : [];
							return {
								...item,
								spuChecked: item.spuChecked && item.spuChecked[0] ? item.spuChecked : [false],
							}
						}) : [];
					console.log(this.shoppingList);
					this.AllChecked = this.shoppingList.every(item => item.spuChecked[0])
				} else {
					this.Utils.toast(`${res.msg}`)
				}

			},
			//获取猜你喜欢列表
			async getCainixihuanList() {
				uni.showLoading()
				let res = await listMobileCommodityPageInfo({
					...this.pageData,
					...this.searchParams,
					markTag: 2
				})
				if (res.code == 2000) {
					uni.hideLoading()
					if(this.pageData.currentPage == 1){
						this.commonityList =(res?.data?.info?.list || []).filter(item => item.status !== 2)
					}else{
						this.commonityList = (this.commonityList.concat(res?.data?.info?.list || [])).filter(item => item.status !== 2)
					}

					this.lastPage = res?.data?.info?.lastPage
				} else {
					this.Utils.toast(`${res.msg}`)
				}

			},
			// 滚动到底部事件
			scrolltolower() {
				
				if (this.pageData.currentPage >= this.lastPage) {
					return
				} else {
					// 获取单据列表
					this.pageData.currentPage++
					this.getCainixihuanList()
				}
			},
		}
	}
</script>

<style lang="scss"
	scoped>
	/deep/.u-modal__button-group__wrapper--confirm.u-modal__button-group__wrapper--confirm  {
		background-color: #ec4141;
		
		.u-modal__button-group__wrapper__text {
			color: #FFF !important;
		}
	}
	/deep/.pd_left10 {
			  padding-left: 29rpx !important;
	}
	.ztl {
		// height: var(--status-bar-height);
		background-color: #fff;
	}
 
  .mian_confirmOrder_address_c {
	  width: 300rpx;
	  white-space: nowrap; /* 防止文本换行 */
	  overflow: hidden;    /* 隐藏超出部分 */
	  text-overflow: ellipsis; /* 显示省略号 */
	margin-right: 250rpx;
		   
  }
// 购物车列表
		.bianji {
			width: 100%;
			font-size: $font_size_14;
			color: $text_color_333;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			// border: 1px solid red;
			background-color: #fff;
			padding: 10rpx 10rpx 10rpx 0;
			.mian_confirmOrder_address_l{
						width: 50rpx;
						height:50rpx;
						margin-left: 20rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}

		}
	.shopping_main {
		// border: 1px solid red;
		box-sizing: border-box;
		width: 100%;
		/* #ifdef H5 */
		padding-bottom: 200rpx;
		/* #endif */
		/* #ifndef H5 */
		padding-bottom: 83rpx;

		/* #endif */
		

		.shoppingList {
			box-sizing: border-box;
			width: 100%;
			// height: 500px;
			// border: 1px solid red;
			background-color: #fff;

            .shoppingList_item:last-child{
				border-bottom: none
			}
			.shoppingList_item {
				// height: 160px;
				width: 100%;
				// border: 1px solid red;
				border-bottom: 1px solid #f3f3f3;
				padding: 20rpx 0;
				padding-left: 16rpx;

				.shoppingList_item_top {
					display: flex;
					align-items: center;

					.checkbox {
						width: 40rpx;

					}

					.item_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: $border_radius_10;
					}

					.item_right {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 120rpx;

						.item_right_name {
							font-size: $font_size_14;
							color: $text_color_333;
						}

						.item_right_unit {
							font-size: $font_size_12;
							color: $text_color_808080;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}


					}
				}

				.shoppingList_item_bom {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.shoppingList_item_bom_r {
						flex: auto;


						.shoppingList_item_bom_r_t {
							display: flex;
							justify-content: space-between;

							.shoppingList_item_bom_r_l {
								display: flex;
								align-items: center;

								.price {
									font-size: $font_size_14;
									color: $text_color_ec4141;
									font-weight: bold;
								}

								.unit {
									font-size: $font_size_12;
									color: $text_color_808080;
									  white-space: nowrap; /* 防止文本换行 */
									 overflow: hidden;    /* 隐藏超出部分 */
								     text-overflow: ellipsis; /* 显示省略号 */
									  width: 100px;
								}
							}
						}

						.shoppingList_item_bom_r_b {
							width: 250rpx;
							max-width: 300rpx;
							font-size: $font_size_12;
							color: $text_color_ec4141;
							border-radius: 80rpx;
							border: 1px solid $text_color_ec4141;
							padding: 5rpx 10rpx;
							background-color: rgba(255, 247, 247, 1);
							margin-left:40rpx;
						}

					}
				}


			}
		}
	}

	.noShopping {
		width: 100%;
		height: 660rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $font_size_12;
		color: $text_color_333;
	}

	.foYouRecommend {
		width: 100%;
		height: 60rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.recommendShoppingList {
		box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
		margin-bottom: 88rpx;
		/* #ifdef H5 */
		margin-bottom: 188rpx;
		/* #endif */
	}

	.aggregateSettlement {
		width: 100%;
		height: 88rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		/* #ifdef H5 */
		bottom: 100rpx;
		/* #endif */
		display: flex;
		align-items: center;
		justify-content: space-between;
 
     
		.aggregateSettlement_checked {
			font-size: $font_size_14;
			color: $text_color_333;
		}

		.aggregateSettlement_right {
			display: flex;
			align-items: center;

			.aggregateSettlement_right_aggregate {
				font-size: $font_size_14;
				color: $text_color_333;

				text {
					color: $text_color_ec4141;
				}
			}

			.aggregateSettlement_right_settlement {
				width: 180rpx;
				height: 88rpx;
				background-color: $text_color_ec4141;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	// 计步器
	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(255, 0, 0, 1);
		color: #fff;
		 /deep/.u-icon__icon.uicon-minus {
					font-weight: bold !important;
					font-size: 24rpx !important;
				}
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		/deep/.u-icon__icon.uicon-plus{
							font-weight: bold !important;
							font-size: 24rpx !important;
						}
	}

	/deep/.u-input {
		background-color: transparent !important;
		padding: 10px 10px !important;
	}

	.min/deep/.uicon-minus {
		color: #fff !important;
	}

	.minus/deep/.uicon-minus {
		color: #fff !important;
	}

	/deep/uni-image {
		border-radius: $border_radius_10;
	}
</style>